<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <style>
        #container {
            width: 100%;
        }
        canvas {
            display: block;
            border: 1px solid black;
            margin: 1em auto;
        }
        #export {
            position: absolute;
            top: 0;
            left: 0;
            border: 0;
            background: black;
            color: white;
            padding: 1em;
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            font-size: 24px;
        }
        #export:hover {
            cursor: pointer;
        }
    </style>

</head>



<body>
<div id="container">
    <canvas id="c"></canvas>
    <input id="export" type="button" value="Export"/>
</div>
</body>
</html>

<script>
    var canvas = document.querySelector('#c');
    canvas.height = innerHeight - 16 * 2;
    canvas.width = canvas.height;

    var ctx = canvas.getContext('2d');

    // background
    ctx.fillStyle = "#000";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    var squareSize = canvas.height / 8;

    for (var i = 0; i < canvas.height / 8; i++) {
        for (var j = 0; j < canvas.width / 8; j++) {
            ctx.strokeStyle = "#" + Math.floor(Math.random() * 16777215).toString(16);
            ctx.strokeRect(squareSize * j, squareSize * i, squareSize, squareSize);
        }
    }

    var exportButton = document.querySelector("#export");
    exportButton.addEventListener('click', exportImage, false);

    function exportImage() {
        window.open(
                canvas.toDataURL(),
                "canvasImage",

                "left=0;top=0;" +
                "width=" + canvas.width +
                ";height=" + canvas.height +
                ";toolbar=0;resizable=0;"
        );
    }
</script>